<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="test"></div>
    <script src="../lib//react.development.js"></script>
    <script src="../lib/react-dom.development.js"></script>
    <script src="../lib/babel.min.js"></script>
    <script src="../lib/prop-types.js"></script>
    <script type="text/babel">
        class Demo extends React.Component {
            render() {
                return (
                    <div>
                        非受控组件（现用现取）：
                        <form onSubmit={this.onSubmit1}>
                            用户名 <input ref={(c) => { this.userName = c }} type="text" />
                            密码 <input ref={(c) => { this.password = c }} type="password" />
                            <button >click</button>
                        </form>
                        受控组件：
                        <form onSubmit={this.onSubmit2}>
                            用户名 <input onChange={({ target: username1 }) => this.setState({ username1 })} type="text" />
                            密码 <input onChange={({ target: password1 }) => this.setState({ password1 })} type="password" />
                            <button >click</button>
                        </form>
                        高阶函数优化：
                        <form onSubmit={this.onSubmit3}>
                            用户名 <input onChange={this.saveFormData('username2')} type="text" />
                            密码 <input onChange={this.saveFormData('password2')} type="password" />
                            <button >click</button>
                        </form>
                    </div>
                )
            }
            state = {
                username1: null,
                password1: null,
                username2:null,
                password2:null
            }

            onSubmit1 = (event) => {
                event.preventDefault()
                const { userName, password } = this
                console.log(userName.value, password.value)
            }
            onSubmit2 = (event) => {
                event.preventDefault()
                const { username1, password1 } = this.state
                console.log(username1.value, password1.value)
            }
            onSubmit3 = (event) => {
                event.preventDefault()
                const { username2, password2 } = this.state
                console.log(username2, password2)
            }
            saveFormData = (property) => {
                return ({target}) => {
                    this.setState({ [property]: target.value })
                }
            }
        }
        ReactDOM.render(<Demo />, document.getElementById('test'))
    </script>
</body>

</html>